layui.define(['layer', 'form'], function (exports) {
    var layer = layui.layer,
        form = layui.form,
        $ = layui.$,
        key = '';
    delHtml()
    $('button').on('click', function () {
        var _this = $(this),
            size = _this.data('size'),
            type = _this.data('type'),
            html = '';
        key = randStrName();
        switch (type) {
            case 'text':
                html = input(type, size)
                break;
            case 'password':
                html = input(type, size)
                break;
            case 'select':
                html = select(size)
                break;
            case 'checkbox_a':
                html = checkbox_a(size)
                break;
            case 'checkbox_b':
                html = checkbox_b(size)
                break;
            case 'radio':
                html = radio(size)
                break;
            case 'textarea':
                html = textarea(size)
                break;
            case 'submit':
                html = submits(size)
                break;
            case 'del':
                $('form').html("\n")
                delHtml()
                $('.code-show').text('')
                return false
                break;
            default:
                layer.msg('类型错误', {
                    icon: 2
                })
        }

        $('form').append(html);
        form.render();
        setHtml(html)
    })

    function delHtml() {
        layui.data('form_html', {
            key: 'html',
            remove: true
        });
    }

    function setHtml(html) {
        var h = layui.data('form_html');
        if (h && h.html) {
            var _d = h.html + html
        } else {
            var _d = html
        }
        layui.data('form_html', {
            key: 'html',
            value: _d
        })
        $('.code-show').text('<form class="layui-form" action="" onsubmit="return false">\n' + _d + '</form>')

    }

    function input(type, size) {
        var name = type === 'text' ? '输入框' : (type === 'password' ? '密码框' : '');
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">' + name + '</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <input type="' + type + '" name="' + key + '" required  lay-verify="required" placeholder="请输入' + name +
            '内容" autocomplete="off" class="layui-input">\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function select(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">选择框</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <select name="' + key + '" lay-verify="required" lay-search>\n' +
            '        <option value=""></option>\n' +
            '        <option value="0">北京</option>\n' +
            '        <option value="1">上海</option>\n' +
            '        <option value="2">广州</option>\n' +
            '        <option value="3">深圳</option>\n' +
            '        <option value="4">杭州</option>\n' +
            '      </select>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function checkbox_a(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">复选框</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <input type="checkbox" name="' + key + '[]" title="写作">\n' +
            '      <input type="checkbox" name="' + key + '[]" title="阅读" checked>\n' +
            '      <input type="checkbox" name="' + key + '[]" title="发呆">\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function checkbox_b(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">开关</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <input type="checkbox" name="' + key + '" lay-skin="switch">\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function radio(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <label class="layui-form-label">单选框</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <input type="radio" name="' + key + '" value="男" title="男">\n' +
            '      <input type="radio" name="' + key + '" value="女" title="女" checked>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function textarea(size) {
        var html = '  <div class="layui-form-item layui-form-text">\n' +
            '    <label class="layui-form-label">文本域</label>\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <textarea name="' + key + '" placeholder="请输入内容" class="layui-textarea"></textarea>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function submits(size) {
        var html = '  <div class="layui-form-item">\n' +
            '    <div class="layui-input-' + size + '">\n' +
            '      <button class="layui-btn" lay-submit lay-filter="formDemo">立即提交</button>\n' +
            '      <button type="reset" class="layui-btn layui-btn-primary">重置</button>\n' +
            '    </div>\n' +
            '  </div>\n';
        return html;
    }

    function jscode() {
        var html = '<script>\n' +
            '  layui.use(\'form\', function(){\n' +
            '    var form = layui.form;\n' +
            '    form.on(\'submit(formDemo)\', function(data){\n' +
            '      layer.msg(JSON.stringify(data.field));\n' +
            '      return false;\n' +
            '    });\n' +
            '  });\n' +
            '</script>';
        return html;
    }

    function randStrName() {
        return Math.random().toString(36).substr(8);
    }

    var jscodehtml = jscode();
    $('.js-show').text(jscodehtml)
    form.on('submit(formDemo)', function (data) {
        layer.msg(JSON.stringify(data.field));
        return false;
    });
    exports('design', {});
});
